<template>
  <div
    id="booking"
    style="width: 100%; height: 400px; background: white; border-radius: 5px; margin-top: 20px"
  ></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

onMounted(() => {
  getLastWeekOrder()
})

const lastWeekData = ref([])

function getLastWeekOrder() {
  axios
    .get('/api/diagram/getOrder_LastWeek')
    .then((res) => {
      lastWeekData.value = res.data
      setLastWeek()
    })
    .catch(() => {
      ElMessage.warning('获取最新一周的订单数据失败！')
    })
}

function setLastWeek() {
  const xData = []
  const seriesData = []
  for (const item of lastWeekData.value) {
    xData.push(item.name)
    seriesData.push(item.value)
  }
  const myChart = echarts.init(document.getElementById('booking'))
  myChart.setOption({
    title: {
      text: '过去一周订单详情',
      left: 'center'
    },
    xAxis: {
      data: xData
    },
    yAxis: {},
    series: [
      {
        data: seriesData,
        type: 'line',
        label: {
          show: true,
          position: 'bottom',
          textStyle: {
            fontSize: 20
          }
        }
      }
    ]
  })
}
</script>
